import { Button, Form, Input, message } from "antd";
import { LinkOutlined } from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom";
import { registerApi } from "../../../apis/login";
import { useState } from "react";
type FieldType = {
  verifycode?: string;
};

function Verifycode() {
  const location = useLocation()
  const navto = useNavigate();
  function to(url: string) {
    navto(url);
  }
  //弹框函数
  const [messageApi, contextHolder] = message.useMessage();
  function showMessage(
    type: any,
    msg: string,
    callback?: Function,
    key?: string,
    url?: string
  ) {
    // 设置key才会干掉加载
    if (callback) {
      messageApi.open({
        key: key,
        type: type,
        content: msg,
        onClose() {
          callback(url!);
        },
      });
    } else {
      messageApi.open({
        key: key,
        type: type,
        content: msg,
      });
    }
  }
  //提交相关
  let { code, username, password, email } = location.state;
  let [Loading, setLoading] = useState<boolean>(false);
  const onFinish = (values: any) => {
    setLoading(true);
    if (code === values.verifycode) {
      registerApi({ code, username, password, email }).then((res) => {
        showMessage("success",res.msg,()=>{setLoading(false);to('/login/sign_in')})
      }).catch(err=>{
        setLoading(false)
        showMessage("error",err)
      })
    } else {
      showMessage("error", "验证码输入错误");
      setLoading(false);
    }
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log(errorInfo);
  };
  return (
    <>
      {contextHolder}
      <div className="logintitle">
        <img src="../../../../public/login/3.svg" alt="" />
        <span>验证码</span>
      </div>
      <Form
        layout="vertical"
        name="basic"
        style={{ width: "100%" }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item>
          <div
            style={{
              width: "100%",
              textAlign: "center",
              color: "#98a7b9",
              fontSize: "13px",
              letterSpacing: "10px",
            }}
          >
            验证码以发送至您的邮箱,请注意查收!
          </div>
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>验证码</label>
          }
          name="verifycode"
          rules={[{ required: true, message: "Please input verifycode!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            block
            loading={Loading}
            icon={<LinkOutlined />}
          >
            <label style={{ fontWeight: "bold" }}>完成注册</label>
          </Button>
        </Form.Item>
      </Form>
      <div className="forgetPass" onClick={() => console.log(1)}>
        
      </div>
      <div className="more">
        没有收到验证码?
        <span className="toregister" onClick={() => console.log(1)}>
          重新发送
        </span>
      </div>
    </>
  );
}

export default Verifycode;
